import {Text, FlatList, TouchableOpacity} from 'react-native';
import React, {useEffect, useState} from 'react';
import {Card, View} from '@ant-design/react-native';
import request from '../../http/http';
import {TBlog} from '../../type/TBlog';
const Blog = ({navigation}) => {
  const [blogList, setBlogList] = useState<Array<TBlog>>([]);
  useEffect(() => {
    getBlogList();
  }, []);
  const getBlogList = () => {
    request.get('/blog/alllist').then(res => {
      res.error === -1 && setBlogList(res.data);
    });
  };
  const Way: React.FC<TBlog> = ({way}) => {
    return <Text style={{color: '#377df6', textAlign: 'right'}}>{way}</Text>;
  };
  const Footer: React.FC<TBlog> = ({goodNum, seeNum}) => {
    return (
      <View>
        <Text>
          <View>
            <Text style={{color: '#377df6'}}>点赞：{goodNum}</Text>
          </View>
          <View style={{paddingLeft: 20}}>
            <Text style={{color: '#377df6'}}>观看：{seeNum}</Text>
          </View>
        </Text>
      </View>
    );
  };
  const goBlogDetail = id => {
    navigation.push('博客详情', {id});
  };
  return (
    <View>
      <FlatList
        data={blogList}
        renderItem={({item}) => (
          <TouchableOpacity
            activeOpacity={0.5}
            onPress={() => goBlogDetail(item.id)}>
            <Card key={item.id} style={{margin: 10}}>
              <Card.Header
                title={item.title}
                thumbStyle={{width: 30, height: 30}}
                extra={Way(item)}
              />
              <Card.Body>
                <View style={{height: 42}}>
                  <Text
                    numberOfLines={2}
                    ellipsizeMode="tail"
                    style={{
                      color: '#000',
                      marginLeft: 16,
                      fontSize: 13,
                      lineHeight: 20,
                    }}>
                    {item.abstract}
                  </Text>
                </View>
              </Card.Body>
              <Card.Footer content={Footer(item)} />
            </Card>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};
export default Blog;
